<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增垃圾分类</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../js/jquery-3.1.0.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/public.js"></script>
    <style>
        .layui-input {
            width: 200px;
        }

        .layui-form-item {
            margin-left: 15px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 10px">
        <label class="layui-form-label">所属分类：</label>
        <div class="layui-input-block">
            <select name="type" id="type" lay-filter="type" lay-verify="type" lay-search="">
                <option name="name" value="">-- 请选择 --</option>
                <option name="name" value="ordinary">普通垃圾</option>
                <option name="name" value="recyclable">可回收垃圾</option>
                <option name="name" value="large">大件垃圾</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" lay-verify="name" lay-reqtext="取个名字吧！"
                   placeholder="请输入类型名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">回收价格：</label>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" name="price" id="price" lay-verify="price" lay-reqtext="没有免费的午餐哦？"
                   placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">价格单位：</label>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" name="unit" id="unit" lay-verify="unit" lay-reqtext="想打麻麻鱼？"
                   placeholder="请输入单位" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , $ = layui.jquery

        //验证表单
        form.verify({
            type: function (value) {
                if (value === "") {
                    return "这是个什么东西？"
                }
            },
            name: function (value) {
                if (value == "" || value == null) {
                    return "取个名字吧"
                }
            },
            price: function (value) {
                var reg1 = /^[1-9]\d*$/;
                var reg2 = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})$/;
                if (value == "" || value == null) {
                    return "没有免费的午餐哦"
                }
                if (!reg1.test(value) && !reg2.test(value)) {
                    return "价格只能是整数或两位小数哦"
                }
            },
            unit: function (value) {
                if (value == null || value == "") {
                    return "想打麻麻鱼？"
                }
            }
        })

        //监听提交
        form.on('submit(demo1)', function (data) {
            var type = data.field.type;
            var name = data.field.name;
            var price = data.field.price;
            var unit = data.field.unit;

            //封装对象
            var refusetype = {
                type: type,
                name: name,
                price: price,
                unit: unit
            }
            $.ajax({
                url: '/refuse-web/api/refuse/addtype',
                method: 'post',
                contentType: 'application/json; charset=UTF-8',//设置content-type
                data: JSON.stringify(refusetype),//将对象转换成json字符串
                dataType: 'JSON',
                success:
                    function (res) {
                        if (res.code = '0') {
                            layer.msg("添加成功", {
                                icon: 1, time: 1000
                            }, function () {
                                layer.closeAll();
                                window.parent.location.reload();
                            });
                        } else {
                            layer.msg("添加失败", {
                                icon: 5, time: 1000
                            }, function () {
                                layer.closeAll();
                                window.parent.location.reload();
                            });
                        }
                    }
                ,
                error: function (data) {
                    layer.msg("服务器忙...", {icon: 5, time: 1000})
                }
            });
            return false;
        })
    });
</script>
</body>
</html>